<!--
 * @Descripttion: 用户下拉框选择
 * @version: 1.0
 * @Author: maoyuan
 * @Date: 2022年11月20日21:46:29
 * @LastEditors: 
 * @LastEditTime: 
-->

<template>
	<el-select v-model="userIds" multiple filterable style="width: 100%">
		<el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id" />
	</el-select>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: String,
				default: () => {
					return '请选择'
				}
			},
			// 节点数据
			options: {
				type: Array, // 必须是树形结构的对象数组
				default: () => {
					return []
				}
			},
			// 设置lable value属性
			defaultProps: {
				type: Object,
				default: () => {
					return {
					value: 'id', // ID字段名
					label: 'label', // 显示名称
					children: 'childList' // 子级字段名
					}
				}
			},
			// 默认勾选的节点
			defaultCheckNodes: {
				type: Array, // 已经分配的资源
				default: () => {
					return []
				}
			},
			width:{
				type: [String,Number],
				default: 200,
			},
			options: {
				type: Object,
				default: () => {}
			},
			readOnly: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				users: [],
			}
		},
		computed: {
			_height() {
				return Number(this.height)?Number(this.height)+'px':this.height
			},
		},
		watch: {
			modelValue(val) {
				this.contentValue = val
				if (val !== this.coder.getValue()) {
					this.coder.setValue(val)
				}
			}
		},
		mounted() {
			this.init()
			//获取挂载的所有modes
			//console.log(CodeMirror.modes)
		},
		methods: {
			init(){
				this.coder = markRaw(CodeMirror.fromTextArea(this.$refs.textarea, this.opt))
				this.coder.on('change', (coder) => {
					this.contentValue = coder.getValue()
					this.$emit('update:modelValue', this.contentValue)
				})
			},
			formatStrInJson(strValue) {
				return JSON.stringify(JSON.parse(strValue), null, 4)
			},
			// 删除tag时，
			removeTag(val) {
			// 取消勾选
			const treeOption = this.$refs.treeOption
			treeOption.setChecked(val, false, false)

			// 重新给控件赋值
			this.$emit('input', this.value)
			},
			// 勾选节点，
			checkNode(node, treeStatus) {
			node.value = node.id
			node.currentLabel = node.label
			// 给selectTree的cachedOptions赋值 设置node.label，使用页面显示label值
			const selectTree = this.$refs.selectTree
			selectTree.cachedOptions.push(node)
			selectTree.handleOptionSelect(node, true)

			this.$emit('input', this.value)
			}
		}
	}
</script>

<style scoped>
  /* 去除tree上面的一行高度 */
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        padding: 0;
    }
</style>
